<script setup lang="ts">
import { shallowRef } from 'vue';
import { LogOutput } from '../../common/types';
import helper from '../../common/helpler';

const logContainer = shallowRef();
const props = defineProps<{ maxSize: number }>();

const appendLog = (log: LogOutput) => {
    let a = createDiv("app-log-line", null);
    a.appendChild(createDiv("app-log-time", log.time));
    a.appendChild(createDiv("app-log-level", helper.getLogLevelText(log.level)));
    a.appendChild(createDiv("app-log-content", log.content));
    logContainer.value.appendChild(a);
    logContainer.value.scrollTop = logContainer.value.scrollHeight;
    if (logContainer.value.children.length > props.maxSize) {
        logContainer.value.removeChild(logContainer.value.children[0]);
    }
}

const createDiv = (className: string, content: string | null): HTMLDivElement => {
    let result = document.createElement('div');
    result.className = className;
    if (content != null) {
        result.appendChild(document.createTextNode(content));
    }
    return result;
}

defineExpose({
    appendLog
})
// <div class="app-log-line">
//             <div class="app-log-time">2024-12-23 22:06:10.432</div>
//             <div class="app-log-level">Error</div>
//             <div class="app-log-content">try connect to 127.0.0.1:5000</div>
//         </div>
</script>
<template>
    <div ref="logContainer" style="cursor: default;">
    </div>
</template>